import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Col, Form, Input, Row, Spin, Button, message, Select, DatePicker } from 'antd';
import React, { Ref, useEffect, useMemo, useRef, useCallback, useState } from 'react';
import pageStyles from '@/common/pageLayout.less';
import { getLoadMapList, getTenantID, onCloseModalCommon, commonDeptGetUser } from '@/utils';
import { ILoadMapTypeAll } from '@/common';
import { getWarnByIDService, getWarnSetReadService } from '../services';
import { getFlowOrgTreeByOrgIDService, getUserDataList } from '@/services/BaseLayout';
import MyIcon from '@/components/MyIcon';
import moment from 'moment';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import '../common/style.less';

const { RangePicker }: any = DatePicker;

export const DetailViewModal: React.FC<WarnManageAPI.IDetailModal> = ({ onClose, checkRowsInfo, reloadManage, curRes }) => {
  /** 弹框Ref */
  const updateWarnModalRef: Ref<IOneModalRef> = useRef(null);

  /** 关闭弹框 */
  const onCloseModal = () => {
    reloadManage();
    onCloseModalCommon(updateWarnModalRef);
  };

  const prefixCls = 'warn-manage-';

  /** 详情接口回调 */
  const detailCallback = (res: any) => {
    if (res && res?.msgFlag) {
      // message.success(res?.msg);
    } else {
      message.error(res?.msg);
    }
  };

  /** 获取详情接口 */
  const { getWarnByIDInfo, getWarnByIDLoading, getWarnByIDRun } = getWarnByIDService(detailCallback);

  /** 设置已读接口回调 */
  const setReadCallback = (res: any) => {
    if (res && res?.msgFlag) {
    } else {
      message.error(res?.msg);
    }
  };

  /** 获取设置已读 */
  const { getWarnSetReadRun, getWarnSetReadLoading } = getWarnSetReadService(setReadCallback);

  /** 初始化 */
  useEffect(() => {
    if (checkRowsInfo && checkRowsInfo?.id) {
      getWarnByIDRun({
        id: checkRowsInfo?.id,
      });
    }
  }, [checkRowsInfo]);

  useEffect(() => {
    if (getWarnByIDInfo && getWarnByIDInfo?.readFlag == 0) {
      getWarnSetReadRun({
        id: getWarnByIDInfo?.id,
        versionNum: getWarnByIDInfo?.versionNum,
      });
    }
  }, [getWarnByIDInfo]);

  /** 弹框底部按钮 */
  const footerModal = useMemo(() => {
    return (
      <>
        <Button
          key="back"
          onClick={onCloseModal}
          // icon={<CloseCircleOutlined />}
        >
          {'关闭'}
        </Button>
      </>
    );
  }, [curRes, getWarnByIDLoading, getWarnSetReadLoading]);

  /**
   * 保存监听的滚动条高度
   */
  const [scrollHeight, setScrollHeight] = useState<number>(0);
  const scrollHeightCallback = useCallback(
    (height: number) => {
      setScrollHeight(height);
    },
    [scrollHeight],
  );

  /**
   * 监听 公告内容滚动
   * @param event
   */
  const monitorScrolling = (event: any) => {
    let { target } = event;
    if (target.scrollTop > document.body?.clientHeight * 0.3) {
      scrollHeightCallback(target?.scrollTop);
    }

    if (target?.scrollTop < document.body?.clientHeight * 0.3) {
      if (scrollHeight != 0) {
        scrollHeightCallback(0);
      }
    }
  };

  return (
    <OneModal
      open={true}
      ref={updateWarnModalRef}
      width={document.body.clientWidth * 0.35}
      title={'提醒事项内容'}
      onCancel={onClose}
      bodyStyle={{
        padding: '5px 10px',
      }}
      centered
      footer={footerModal}
      confirmLoading={getWarnByIDLoading || getWarnSetReadLoading}
    >
      <Spin spinning={getWarnByIDLoading || getWarnSetReadLoading}>
        {getWarnByIDInfo?.handleInfo || ''}

        {/* <Row className={prefixCls + 'row'} gutter={[8, 0]}>
          <Col span={24} className={prefixCls + 'row-col'} style={{ paddingLeft: '0px' }}>
            <div
              className={prefixCls + 'row-col-divBox'}
              style={{
                position: 'relative',
                overflow: 'hidden',
              }}
            >
              <div className={prefixCls + 'detailModal'}>
                <div style={{ height: document.body.clientHeight * 0.3 }} className={prefixCls + 'detailModal-scrollBox'}>
                  <ScrollBarLayout onScroll={monitorScrolling}>
                    <Row id={'warnDetailViewScroll'} style={{ height: 'auto' }}>
                      <Col span={24}>
                        <div
                          style={{ fontSize: '20px', padding: '20px', textIndent: '2em' }}
                          dangerouslySetInnerHTML={{
                            __html: getWarnByIDInfo && getWarnByIDInfo?.id ? getWarnByIDInfo?.warnInfo : '',
                          }}
                          className={pageStyles['editorStyle']}
                        />
                      </Col>
                    </Row>
                    <div  className={prefixCls + 'detailModal-contentUser'}  >
                      <div>
                        <div style={{ display: 'flex' }}>
                          <div style={{ textAlign: 'right', width: '6em' }}>归属人：</div>
                          <span style={{ color: '#545454' }}>{(getWarnByIDInfo && getWarnByIDInfo?.ownerName) || '--'}</span>
                        </div>
                        <div style={{ display: 'flex' }}>
                          <div style={{ textAlign: 'right', width: '6em' }}>归属部门：</div>
                          <span style={{ color: '#545454' }}>
                            {(getWarnByIDInfo && getWarnByIDInfo?.ownPositionName) || '--'}
                          </span>
                        </div>
                        <div style={{ display: 'flex' }}>
                          <div style={{ textAlign: 'right', width: '6em' }}>归属时间：</div>
                          <span style={{ color: '#545454' }}>{(getWarnByIDInfo && getWarnByIDInfo?.ownTime) || '--'}</span>
                        </div>
                      </div>
                    </div>
                  </ScrollBarLayout>
                </div>
              </div>
            </div>
          </Col>
        </Row> */}
      </Spin>
    </OneModal>
  );
};
